<template>
  <div cclass="clinicPrescription-container">
    <div class="top-title-container">
      <modules-title title-name="诊所处方">
        <template slot="btn">
          <div class="list-top-right">
            <el-button
              class="main-btn"
              plain
              size="small"
              type="primary"
              @click="createMedicinePrescription"
            >新建成药处方</el-button
            >
            <el-button
              class="main-btn"
              plain
              size="small"
              type="primary"
              @click="createYinpianPrescription"
            >新建饮片处方</el-button
            >
            <el-button class="main-btn" plain size="small" type="primary" @click="createTransfusionPrescription"
            >新建输液处方</el-button
            >
          </div>
        </template>
      </modules-title>
    </div>
    <div class="prescription-list-container">
      <div class="list-top-container">
        <div class="list-top-left" style="display: flex">
          <div style="width: 120px;line-height: 30px">处方模板</div>
          <el-input placeholder="搜索处方模板" v-model="search"></el-input>
          <el-button class="main-btn" size="small" @click="searchList" type="primary" style="margin-left: 10px">搜索</el-button>
          <el-button class="border-btn" size="small" @click="clearList" style="margin-left: 10px">重置</el-button>
        </div>
      </div>
      <div class="list-content-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          header-cell-class-name="table-header-cell"
        >
          <el-table-column prop="prescription" label="处方名称">
            <template slot-scope="scope">
              <p v-if="scope.row.prescription">
                {{ scope.row.prescription.prescription_name }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="prescription" label="类型" align="center">
            <template slot-scope="scope">
              <p v-if="scope.row.prescription">
                {{ scope.row.prescription.category_name }}
              </p>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="btn-container">
                <el-button type="text" @click="prescriptionDetailOption(scope.row)">查看详情</el-button>
                <span>|</span>
                <el-button
                  type="text"
                  @click="prescriptionEditOption(scope.row)"
                  >编辑</el-button
                >
                <span>|</span>
                <el-button
                  type="text"
                  class="red-text-btn"
                  @click="prescriptionDeleteOption(scope.row.ID)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination-container">

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="postData.pager.number"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="postData.pager.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { prescriptionList, prescriptionDelete } from "@/api/templates.js";
export default {
  name: "clinicPrescription",
  data() {
    return {
      search:'',
      tableMaxHeight: "650px",
      currentPage: 1,
      listTotal: 0,
      editId: 0,
      postData: {
        search_type: 2,
        pager: {
          number: 1,
          size: 30,
          order_by: ""
        },
        title:''
      },
      tableData: [],
    };
  },
  created() {
    this.getPrescriptionList(this.postData);
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.postData.pager.size = val
      this.getPrescriptionList(this.postData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.postData.pager.number = val
      this.getPrescriptionList(this.postData);
    },
    // 创建成药处方
    createMedicinePrescription() {
      this.$router.push({
        name: "createCYPrescription",
        query: {
          types: 2,
        },
      });
    },
    // 创建饮片处方
    createYinpianPrescription() {
      this.$router.push({
        name: "createYPPrescription",
        query: {
          types: 2,
        },
      });
    },
    // 创建输液处方
    createTransfusionPrescription() {
      this.$router.push({
        name: "createTFPrescription",
        query: {
          types: 2,
        },
      });
    },
    clearList(){
      this.search = ''
      this.postData.title = this.search
      this.getPrescriptionList(this.postData);
    },
    searchList() {
      this.postData.title = this.search
      this.getPrescriptionList(this.postData);
    },
    // 处方列表
    getPrescriptionList(data) {
      prescriptionList(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data || [];
          this.listTotal = res.data.total;
        }
      });
    },
    // 处方删除
    prescriptionDeleteOption(id) {
      prescriptionDelete(id).then((res) => {
        if (res.code == 200) {
          this.getPrescriptionList(this.postData);
        }
      });
    },
    prescriptionDetailOption(item){
      this.editId = item.ID;
      switch (item.prescription.category_key) {
        case "cycf":
          this.$router.push({
            name: "createCYPrescription",
            query: {
              id: this.editId,
              types: 2,
              detail:'1',
            },
          });
          break;
        case "ypcf":
          this.$router.push({
            name: "createYPPrescription",
            query: {
              id: this.editId,
              types: 2,
              detail:'1',
            },
          });
          break;
        case "sycf":
          this.$router.push({
            name: "createTFPrescription",
            query: {
              id: this.editId,
              types: 2,
              detail:'1',
            },
          });
          break;
      }
    },
    prescriptionEditOption(item) {
      this.editId = item.ID;
      switch (item.prescription.category_key) {
        case "cycf":
          this.$router.push({
            name: "createCYPrescription",
            query: {
              id: this.editId,
              types: 2,
            },
          });
          break;
        case "ypcf":
          this.$router.push({
            name: "createYPPrescription",
            query: {
              id: this.editId,
              types: 2,
            },
          });
          break;
        case "sycf":
          this.$router.push({
            name: "createTFPrescription",
            query: {
              id: this.editId,
              types: 2,
            },
          });
          break;
      }
    },
  },
};
</script>
<style lang="scss">
@import "@/assets/scss/templates/clinicPrescription/clinicPrescription.scss";
</style>
